<template>
    <div class="centerMain">
        <el-form
            ref="formDesgin"
            :model="formDesgin"
            class="el-form"
            label-position="top"
            label-width="120px">
            <el-row class="addTitle">
                <el-breadcrumb separator="/" size="small">
                    <el-breadcrumb-item>{{uploadparams.zoneName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{uploadparams.methodName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>数据管理</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>
            <el-radio-group v-model="radioType">
                <el-radio-button label="批次数据"></el-radio-button>
                <el-radio-button label="绑定模型"></el-radio-button>
            </el-radio-group>
            <div class="formBody" v-if="radioType=='批次数据'">
                <el-row
                :gutter="10"
                class="mb8 clearfix">
                <el-col :span="22">
                    <div class="box"></div>
                </el-col>
                <el-col
                    :span="2"
                    class="add-col"
                >
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleImprot($event)"
                    >导入</el-button>
                </el-col>
                </el-row>  
                <el-table
                    v-loading="loading"
                    :data="dataList"
                    row-key="id"
                    :tree-props="{children:'children'}"
                    :header-cell-style="table_style"
                    max-height="650"
                >
                    <el-table-column
                        label="名称"
                        prop="name"
                        :show-overflow-tooltip="true"
                        width="250"
                    />
                    <el-table-column
                    label="状态"
                    prop="createName"
                    align="center">
                        <template slot-scope="scope">
                                <div v-if="scope.row.status!=undefined">
                                    <el-switch v-model="scope.row.blStaus" active-color="#13ce66" inactive-color="#A6A6A6" @change="swichChange(scope.row)"></el-switch>
                                </div>
                                <div v-else>
                                        <span></span>  
                                </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="上传人"
                        prop="createBy"
                        :show-overflow-tooltip="true"
                        align="center"
                        width="150"
                    />
                    <el-table-column
                        label="上传时间"
                        prop="uploadTime"
                        align="center"
                        width="250"
                    >
                        <template slot-scope="scope">
                            <span>{{ dealTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <template  v-if="uploadparams.codeStr=='ert'&&scope.row.status!=undefined">
                            <el-button 
                                size="mini" 
                                type="text" 
                                icon="el-icon-plus" 
                                @click="handleAddERT(scope.row)"
                            >新增</el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                            >删除</el-button>
                        </template>
                        <template  v-else-if="scope.row.children!=null">
                            <el-button 
                                size="mini" 
                                type="text" 
                                icon="el-icon-plus" 
                                @click="handleAdd(scope.row)"
                            >添加</el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                            >删除</el-button>
                        </template>
                        <template  v-else>
                            <el-button 
                                size="mini" 
                                type="text" 
                                icon="el-icon-bottom" 
                                @click="dowloadFile(scope.row)"
                            >下载</el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                            >删除</el-button>
                        </template>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            <div class="formBody" v-else>
                 <el-row
                :gutter="10"
                class="mb8 clearfix">
                <el-col :span="22">
                    <el-button
                        size="small"
                        @click="handleDelete($event)"
                        :disabled="multiple2"
                    >已绑定模型</el-button>
                </el-col>
                <el-col
                    :span="2"
                    class="add-col"
                >
                    <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-plus"
                        @click="handleImprot($event)"
                    >添加模型</el-button>
                </el-col>
                </el-row>  
                <el-table
                    v-loading="loadingModel"
                    :data="modelList"
                    @selection-change="handleSelectionChange2"
                    :header-cell-style="table_style"
                    max-height="650"
                >
                    <el-table-column
                        type="selection"
                        width="80"
                        align="center"
                    />
                    <el-table-column
                        label="模型名称"
                        type="index"
                        prop="modelName"
                        width="250"
                        sortable
                    />
                    <el-table-column
                        label="模型备注"
                        prop="modelSize"
                        :show-overflow-tooltip="true"
                        align="center"
                        width="250"
                    />
                    <el-table-column
                        label="创建人"
                        prop="createUser"
                        :show-overflow-tooltip="true"
                        align="center"
                        width="150"
                    />
                    <el-table-column
                        label="创建时间"
                        prop="createTime"
                        align="center"
                        width="250"
                    >
                        <template slot-scope="scope">
                            <span>{{ dealTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="修改人"
                        prop="updateUser"
                        :show-overflow-tooltip="true"
                        align="center"
                        width="150"
                    />
                    <el-table-column
                        label="修改时间"
                        prop="updateTime"
                        align="center"
                        width="250"
                    >
                        <template slot-scope="scope">
                            <span>{{ dealTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="modelUpdate(scope.row)"
                                >新增</el-button>
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="modelDelete(scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
        </el-form>
        <!-- 添加对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form
                ref="formFile"
                :model="formData"
                :rules="rules"
                label-width="100px"
            >
               
                <el-form-item
                    :label="'批次名称'"
                    prop="stageName"
                >
                    <el-input
                        :disabled="formData.disabled"
                        v-model="formData.stageName"
                        placeholder="请输批次号:00001"
                    />
                </el-form-item>
                <el-form-item
                    label="文件上传"
                    prop="files"
                    >
                <div class="photo-show" v-loading="loadup">
                      <el-upload
                        class="upload-demo"
                        ref="uploadFile"
                        :action="uploadUrl()"
                        :on-success="handlePreview"
                        :on-error="handleErro"
                        :on-remove="handleRemove"
                        :on-change ="handleChange"
                        :before-upload ="beforeUpload"
                        :data="formData"
                        :headers="headers"
                        :multiple="true"
                        :limit="limitNum"
                        :accept="fileType()"
                        :auto-upload="false">
                        <template #trigger>
                            <el-button size="small" type="primary">选取文件</el-button>
                        </template>
                        <template #tip>
                            <!-- <div class="el-upload__tip">
                            只能上传xlsx/csv文件
                            </div> -->
                        </template>
                        </el-upload>
                </div>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
            </div>
        </el-dialog>
        <!-- //ert新建侧线 -->
        <el-dialog
            :title="title"
            :visible.sync="openERT"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form
                ref="addERT"
                :model="formDataErt"
                :rules="rulesErt"
                label-width="100px"
            >
               <el-row>
                <el-col :span="10">
                <el-form-item
                    label="选择批次号"
                    prop="stageName"
                >
                    <el-select
                        v-model="formDataErt.stageName"
                        filterable
                        size="small"
                        allow-create
                        default-first-option
                        placeholder="输入为新建批次">
                        <el-option
                            v-for="item in stageOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="10">
                 <el-form-item
                    label="侧线名称"
                    prop="ertName"
                >
                    <el-input
                        size="small"
                        
                        v-model="formDataErt.ertName"
                        placeholder="请输入侧线名"
                    />
                </el-form-item>
                </el-col>
               </el-row>
                <el-row>
                <el-col :span="10">
                 <el-form-item
                    label="长度(m)"
                    prop="ertLength"
                >
                    <el-input
                        size="small"
                        
                        v-model="formDataErt.ertLength"
                        type="number"
                    />
                </el-form-item>
                </el-col>
                <el-col :span="10">
                <el-form-item
                    label="电极数"
                    prop="electrodeNum"
                >
                    <el-input
                        size="small"
                        type="number"
                        v-model="formDataErt.electrodeNum"
                        
                    />
                </el-form-item>
                </el-col>
                <el-col :span="10">
                 <el-form-item
                    label="电极间距(m)"
                    prop="electrodeSpace"
                >
                    <el-input
                        size="small"
                        type="number"
                        v-model="formDataErt.electrodeSpace"
                        
                    />
                
                </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="10">
                 <el-form-item
                    label="仪器"
                    prop="instrument"
                >
                    <el-input
                        size="small"
                        
                        v-model="formDataErt.instrument"
                        
                    />
                </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                <el-col :span="10">
                <el-form-item
                    label="操作人"
                    prop="operator"
                >
                    <el-input
                        size="small"
                        
                        v-model="formDataErt.operator"
                        
                    />
                </el-form-item>
                </el-col>
                <el-col :span="10">
                <el-form-item
                    label="审核人"
                    prop="checher"
                >
                    <el-input
                        size="small"
                        v-model="formDataErt.checher"
                        
                    />
                </el-form-item>
                </el-col>
                </el-row>
                <el-form-item
                    label="坐标文件"
                    prop="files"
                    >
                <div class="photo-show" v-loading="loadup">
                      <el-upload
                        class="upload-demo"
                        ref="uploadFileErt"
                        :action="uploadUrlErt()"
                        :on-success="handlePreviewErt"
                        :on-error="handleErroErt"
                        :on-remove="handleRemoveErt"
                        :on-change ="handleChangeErt"
                        :data="formDataErt"
                        :headers="headers"
                        :multiple="true"
                        :limit="1"
                        :accept="fileTypeErt"
                        :auto-upload="false">
                        <template #trigger>
                            <el-button size="small" type="primary">选取文件</el-button>
                        </template>
                        <template #tip>
                            <!-- <div class="el-upload__tip">
                            只能上传xlsx/csv文件
                            </div> -->
                        </template>
                        </el-upload>
                </div>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="submitFormERT"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {getMethodPhase,getMethodPhaseERT,importFile,updateStatge} from "@/api/data/proDataForup"
import { saveAs } from 'file-saver'
export default {
    name: 'uploadData',
    props:{
        zoneId:{}
    },
    created(){
        this.uploadparams = this.$route.query
        if(this.uploadparams.methodName=="遥感"){
            // this.limitNum = 100
        }
    },
    data() {
        return {
            formDesgin:{},
            //项目相关参数
            uploadparams:undefined,
            //上传表单
            formData:{
                stageName:undefined,
                files:undefined
            },
            //弹出层显示
            open:false,
            title:"上传数据",
            //文件列表
            fileList:[],
            //模型列表
            modelList:[],
            //上传请求头
            headers:{'GeomativeAuthorization':'Geomative ' + getToken()},
            //选择未上传列表
            uploadFileList:[],
            //文件选择列表
            //类型选择
            radioType:"批次数据",
            //导入数据表格
            loading:false,
            loadingModel:false,
            //表格数据列表
            dataList:undefined,
            //表格样式
            table_style:{background:'#F1F2F5',color:'#43454D',height:'35px'},
            multiple1:true,
            multiple2:true,
            ids1:[],
            ids2:[],
            //表单验证
            rules:{
                    stageName: [
                        { required: true, message: "批次号不能为空", trigger: "blur" }
                    ],
                    files:[
                         { required: true, message: "文件不能为空", trigger: "blur" }    
                    ]
                },
            loadup:false,
            //ERT上传
            fileTypeErt:".xlsx",
            //ert侧线
            openERT:false,
            //批次选择
            stageOptions:[],
            //errt新建数据
            formDataErt:{
                stageName:null,
                files:undefined
            },
            //ERT新建文件上传
            rulesErt:{
                    stageName: [
                        { required: true, message: "批次号不能为空", trigger: "blur" }
                    ],
                    ertName:[
                         { required: true, message: "测线名称不能为空", trigger: "blur" }    
                    ],
                    electrodeNum:[
                         { required: true, message: "电极数不能为空", trigger: "blur" }    
                    ],
                    files:[
                         { required: true, message: "文件不能为空", trigger: "blur" }    
                    ]
                },
            //文件上传限制
            limitNum:1,
            
        };
    },
    mounted() {
        this.getMethodPhaseList()
    },
    watch:{
    },
    methods: {
        //下载文件
        dowloadFile(row){
            debugger
            if(row.fileId){
                let url = this.baseUrl+row.fileId
                let splitName =row.fileId.split('.')
                let fileName =row.name+"."+splitName[splitName.length-1]
                saveAs(url,fileName)
            }
        },
        //获取批次列表
        getMethodPhaseList(){
            this.stageOptions = []
            if(this.uploadparams.codeStr=="ert" ){ //ert数据另外处理
                getMethodPhaseERT(this.uploadparams.projectId,this.uploadparams.zoneId,this.uploadparams.methodId).then(res=>{
                    this.dataList = res.data
                    this.dataList.map(item=>{
                                    let obj = {label:item.name,value:item.id}
                                    this.stageOptions.push(obj)
                                    item.blStaus = item.status=='0'?false:true
                            })
                })
            }
            else{
                getMethodPhase(this.uploadparams.projectId,this.uploadparams.zoneId,this.uploadparams.methodId).then(res=>{
                this.dataList = res.data
                this.dataList.map(item=>{
                            item.blStaus = item.status=='0'?false:true
                        })
                console.log(this.dataList)
                })
                
            }
            
        },
        //文件上传成功的钩子
        handlePreview(response){
            if(response.code!=200){
                this.msgError("导入失败,"+response.msg);
            }
            else{
                this.msgSuccess("导入成功");
                this.open =false;
                this.getMethodPhaseList()
                this.$refs.uploadFile.clearFiles();
                this.formData={
                    stageName:undefined,
                    files:undefined}
            }
            this.loadup = false
        },
        //新建ert侧线文件上传成功的钩子
        handlePreviewErt(response){
            debugger
            if(response.code!=200){
                this.msgError("导入失败,"+response.msg);
            }
            else{
                this.msgSuccess("导入成功");
                this.openERT = false
                this.getMethodPhaseList()
                this.$refs.uploadFileErt.clearFiles();
                this.formDataErt={
                    stageName:undefined,
                    files:undefined
                    }
            }
            this.$refs.uploadFileErt.clearFiles();
            this.formDataErt = {}
            this.loadup = false
        },
        handleErroErt(){
            debugger
            
        },
        //文件上传失败
        handleErro(){
            this.formDataErt = {}
        },
        //文件上传之前
        beforeUpload(file){
        },
        //上传地址
        uploadUrl(){
            if(this.uploadparams.codeStr=="ert"){
                //导入excel ERT
                return "/proUp-api/pzErtInfo/importDat"
            }
            else if(this.formData.stageId){
                //批次添加data数据
                return "/proUp-api/stage/impotAdd"
            }
            else{
                //添加数据
                 return "/proUp-api/stage/import"
            }
        },
        // 文件上传类型规定
        fileType(){
            if(this.uploadparams.codeStr=="ert"){
                return ".zip"
            }
            else if(this.uploadparams.codeStr=="remote"){
                return ".tif"
            }
            else{
                return ".csv,.xlsx"
            }
            },
        //ert新建侧线上传文件
        uploadUrlErt(){
            return "/proUp-api/pzErtInfo/addOne"
        },
        //文件移除的钩子
        handleRemove(){
            this.formData.files=undefined
        },
        //文件移除的钩子
        handleRemoveErt(){
            this.formDataErt.files=undefined
        },
        //文件状态改变时
        handleChange(file,fileList){
            if(fileList.length){
                this.formData.files = [];
                fileList.map(item=>{
                    this.formData.files.push(item.raw)
                })
            }else{
                this.formData.files=undefined
            }
        },
        //文件状态改变时
        handleChangeErt(file,fileList){
            if(fileList.length){
                this.formDataErt.files = [];
                fileList.map(item=>{
                    this.formDataErt.files.push(item.raw)
                })
            }else{
                this.formDataErt.files=undefined
            }
        },
        //提交按钮
        submitForm(){
            this.$refs["formFile"].validate(valid => {
                if (valid) {

                    if(this.formData.stageId){
                        // console.log(this.$refs.uploadFile.action)
                        this.$refs.uploadFile.submit();
                    }
                    else{
                        this.formData.projectId=this.uploadparams.projectId
                        this.formData.zoneId=this.uploadparams.zoneId
                        this.formData.methodId=this.uploadparams.methodId
                        // console.log(this.$refs.uploadFile.action)
                        this.$refs.uploadFile.submit();

                    }
                    
                    this.loadup = true
                }
            })
        },
        //文件删除
        handleDelete(){},
        // 文件导入
        handleImprot(e){
            if(this.uploadparams.codeStr=="ert" ){
                this.openERT = true
            }
            else{
                this.open =true
            }
            
        },
        //文件导出
        handleExport(){},
        //多选框选中
        handleSelectionChange1(selection) {
            this.ids1 = selection.map(item => item['id'])
            this.multiple1 = !selection.length
        },
        //多选框选中
        handleSelectionChange2(selection) {
            this.ids2 = selection.map(item => item['id'])
            this.multiple2 = !selection.length
        },
        //添加ert线
         handleAddERT(row){
                this.formDataErt.stageName=row.name,
                this.openERT = true
        },
        //批次添加文件
        handleAdd(row){
                this.formData.stageName=row.name
                if(this.uploadparams.codeStr=="ert" ){
                    this.formData.id=row.id
                }
                this.formData.stageId=row.id
                this.formData.disabled = true
                this.open =true
        },

        //模型删除按钮
        modelDelete(){},
        //模型修改按钮
        modelUpdate(){
        },
        //启用禁用切换
        swichChange(row){
            row.status = row.status=='0'?'1':'0'
            // console.log(row)
            updateStatge(row.id)
        },
        submitFormERT(){
            this.$refs["addERT"].validate(valid => {
                if (valid) {
                        // console.log(this.formDataErt)
                        this.formDataErt.projectId=this.uploadparams.projectId
                        this.formDataErt.zoneId=this.uploadparams.zoneId
                        this.formDataErt.methodId=this.uploadparams.methodId
                        this.$refs.uploadFileErt.submit();
                        this.loadup = true
                }
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.centerMain{
    padding: 20px;
    .addTitle{
        display: block;
        margin: 20px 0px;
    }
    .el-form{
    background: #fff;
    padding: 20px;
    .formBody{
        padding: 20px 0px 20px 0px;
        /deep/ .el-table td, .el-table th{
            padding: 0px;
        }
        .clearfix{
            margin-bottom: 20px;
            .box{
                width: 1px;
                height: 1px;
            }
        }
    }
}
.finishRow{
    margin-top: 20px;
    position: absolute;
    bottom: 5px;
    left: 48%;
}
.el-icon-upload{
    font-size: 24px;
    color: #409EFF ;
}
.el-icon-upload:hover{
    font-size: $main-color;
}
}

</style>